<template>
	<div>
		<el-card>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动设置</el-breadcrumb-item>
				<el-breadcrumb-item>活动内容设置</el-breadcrumb-item>
			</el-breadcrumb>
			<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">

				<el-tab-pane label="活动海报" name="second">
					<div style="margin-bottom:8px;">
						<el-button size="small" icon="el-icon-plus" @click="used(0)">添加海报</el-button>
					</div>
					<el-table :data="imgList" border height="680"
						:header-cell-style="{ background: '#409EFF', color: '#FFF' }">
						<el-table-column label="编号" prop="imgId" width="60"></el-table-column>
						<el-table-column label="海报">
							<template slot-scope="scope">
								<el-image style="width: 50px;height: 50px"
									:src="path + 'zhonghui/share/' + scope.row.imgName" fit="cover" :previewSrcList="[
					path + 'zhonghui/share/' + scope.row.imgName
				]"></el-image>

							</template>
						</el-table-column>
						<el-table-column label="开始时间" prop="startTime"></el-table-column>
						<el-table-column label="结束时间" prop="endTime"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="prop">
								<el-button icon="el-icon-delete" size="small"
									@click="delHandle(prop.row.imgId)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<div class="pagination-control">
						<el-pagination :page-sizes="[20, 50, 80, 100]" :page-size="size1" :current-page="page1"
							layout="total, sizes, prev, pager, next, jumper" :total="total1" @size-change="sizeChange1"
							@current-change="currentChange1"></el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="客服微信" name="thr">
					<div style="margin-bottom:8px;">
						<el-button size="small" icon="el-icon-plus" @click="used(1)">添加客服微信</el-button>
					</div>
					<el-table :data="kefuImgList" border height="680"
						:header-cell-style="{ background: '#409EFF', color: '#FFF' }">
						<el-table-column label="编号" prop="imgId" width="60"></el-table-column>
						<el-table-column label="微信二维码">
							<template slot-scope="scope">
								<el-image style="width: 50px;height: 50px"
									:src="path + 'zhonghui/weixin/' + scope.row.imgName" fit="cover" :previewSrcList="[
					path + 'zhonghui/weixin/' + scope.row.imgName
				]"></el-image>

							</template>

						</el-table-column>
						<el-table-column label="开始时间" prop="startTime"></el-table-column>
						<el-table-column label="结束时间" prop="endTime"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="prop">
								<el-button icon="el-icon-edit" size="small"
									@click="delHandle(prop.row.imgId)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-control">
						<el-pagination :page-sizes="[20, 50, 80, 100]" :page-size="size2" :current-page="page2"
							layout="total, sizes, prev, pager, next, jumper" :total="total2" @size-change="sizeChange2"
							@current-change="currentChange2"></el-pagination>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-card>



		<el-dialog :visible.sync="editRoleAuths" :title="imgFlag == 1 ? '新增海报' : '新增客服微信'" width="630px">
			<el-form ref="formRef" label-width="130px" class="send-dialog-form">
				<el-form-item :model="shareRule" :label="imgFlag == 1 ? '海报' : '客服微信'">
					<el-upload action="aa" :on-remove="removeHandle" :on-change="removeHandle" class="upload-demo"
						ref="loopList" :auto-upload="false" :file-list="fileList">
						<el-button size="small" icon="el-icon-upload">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">请上传图片</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="开始时间" prop="startTime">
					<el-date-picker v-model="shareRule.startTime" type="datetime" value-format="yyyy-MM-dd"
						placeholder="请选择开始时间" :editable="false"
						:rules="{ required: true, message: '输入开始时间', trigger: 'change' }">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker v-model="shareRule.endTime" type="datetime" value-format="yyyy-MM-dd"
						placeholder="请选择结束时间" :editable="false"
						:rules="{ required: true, message: '输入结束时间', trigger: 'change' }">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editRoleAuths = false">取 消</el-button>
				<el-button type="primary" @click="submitImg">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>

import {
	listShare, addShare, delShare
} from "../../network/rechargeRule";

import { url } from "network/request";

export default {
	data() {
		return {
			path: url,
			activeName: "second",
			editRoleAuthVisible: false,
			shareRule: {},
			editRoleAuths: false, //海报弹窗
			fileList: [],
			imgList: [],
			kefuImgList: [],
			addFlag: 2,// 2 海报  3 客服微信
			page1: 1,
			page2: 1,
			size1: 10,
			size2: 10,
			total1: 0,
			total2: 0,
			imgFlag: 0,// 0 海报 1客服
		};
	},
	methods: {


		handleClick() {
			this.imgFlag = this.activeName == 'second' ? 0 : 1
			if ((this.activeName == 'thr' && this.kefuImgList.length == 0) || (this.activeName == 'second' && this.imgList.length == 0)) {
				this.getList()
			}
		},

		getList() {
			listShare({
				page: this.imgFlag == 0 ? this.page1 : this.page2,
				size: this.imgFlag == 0 ? this.size1 : this.size2,
				imgFlag: this.imgFlag
			}).then(res => {
				if (this.imgFlag == 0) {
					this.imgList = res.data.list
					this.total1 = res.data.total
				} else {
					this.kefuImgList = res.data.list
					this.total2 = res.data.total
				}
			});
		},


		cancel() {
			this.editRoleAuths = false
			this.$refs.formRef.resetFields();
		},
		used(flag) {
			this.addFlag = flag
			this.editRoleAuths = true;
		},

		submitImg() {

			if (this.fileList.length == 0) {
				this.$message.warning('请上传图片')
				return
			} else if (this.shareRule.startTime == '' || this.shareRule.startTime == '') {
				this.$message.warning('请选择时间')
				return
			}

			let fd = new FormData();
			fd.append("shopId", sessionStorage.shop_id);
			fd.append("startTime", this.shareRule.startTime);
			fd.append("endTime", this.shareRule.endTime);
			fd.append("imgFlag", this.imgFlag);

			fd.append("flag", 'add');

			if (this.imgFlag == 0) {
				fd.append("fileShare", this.fileList[0]);
			} else {
				fd.append("fileWeiXin", this.fileList[0]);
			}
			addShare(fd).then(res => {
				if (res.flag) {
					this.$message.success("添加成功");
					this.editRoleAuths = false;
					this.getList();
					this.shareRule.startTime = ''
					this.shareRule.endTime = ''
					this.fileList = []
				} else {
					this.$message.warning("添加失败");
				}
			})
			console.log(this.fileList);
		},

		removeHandle(file, fileList) {
			console.log(fileList);
			let list = [];
			for (let i = 0; i < fileList.length; i++) {
				list.push(fileList[i].raw);
			}
			this.fileList = list;
			console.log(this.fileList);
		},



		// 删除 规则
		delHandle(id) {
			delShare({
				cateIds: id
			}).then(res => {
				if (res.flag) {
					this.$message.success('删除成功')
					this.getList()
				} else {
					this.$message.warning('删除失败')
				}
			})
		},

		//每页N条发生改变
		sizeChange1(val) {
			this.size1 = val
			this.getList()
		},
		// 页码发生改变
		currentChange1(val) {
			this.page1 = val
			this.getList()
		},
		//每页N条发生改变
		sizeChange2(val) {
			this.size2 = val
			this.getList()
		},
		// 页码发生改变
		currentChange2(val) {
			this.page2 = val
			this.getList()
		},

	},
	created: function () {
		this.getList();
		this.url = url;
	}
};
</script>

<style scoped>
.transferW {
	width: 680px;
}

.tipText {
	padding-bottom: 10px;
	padding-left: 130px;
	color: red;
}
</style>
